<template>
	<view class="top">
		<view class="topBar">
			<view v-if="this.isEdit === true" class="top-left" @tap="cancel">取消</view>
			<view v-else class="top-left" @tap="returnTo" style="font-size: 30px;"><</view>
			<view class="top-center">路线详情</view>
			<view v-if="this.isEdit === false" class="top-edit" @tap="toEdit">编辑</view>
			<view v-else class="top-edit" @tap="saveEdit">保存</view>
		</view>
	</view>

	<view style="height: 75px;"></view>
	<view class="route-title">
		<view class="route-name">{{this.route.mapName}}</view>
<!-- 		<view class="toMap" @tap="checkMap">查看地图</view> -->
	</view>
	<view v-if="this.isEdit === true" class="addSpot" @tap="addSpot">
		<view>添加点位</view>
	</view>
	<view class="spots">
		<view class="spot-view" v-for="spot in routeInfo">

			<view class="left">
				<view class="spot-name" v-if="this.isEdit === false">{{spot.mapDetailDesc}}</view>
				<input v-else class="spot-name" :value="spot.mapDetailDesc"></input>
				<view class="spot-unit" v-if="this.isEdit === false">所属机组: {{spot.unitName}}</view>
				<input v-else class="spot-unit" :value="'所属机组:'+ spot.unitName"></input>
				<view class="spot-unit" v-if="this.isEdit === false">NFC名: {{spot.nfcName}}</view>
				<input v-else class="spot-unit" :value="'NFC名:'+ spot.nfcName"></input>
			</view>
			<button v-if="this.isEdit === true && this.route.mapId !== 1" class="edit-btn" type="warn" @tap="deleteSpot(spot)">删除</button>

		</view>
	</view>
	<view style="width: 100%;display: flex;justify-content: center;padding-top: 10px;padding-bottom: 10px;">
		<view style="color: gray;">没有更多数据了</view>
	</view>

</template>

<script>
	import request from '../../../common/request'
	export default {
		data() {
			return {
				route: {},
				isEdit: false,
				routeInfo: [],
				isAddPoint: false,
				mapId:-1,
			}
		},
		onLoad(options) {
			this.route = JSON.parse(decodeURIComponent(options.route))
			console.log(this.route.mapName)
			this.getMapDetails()
			this.mapId = this.route.mapId
		},
		onShow() {
			this.getMapDetails()
		},
		methods: {
			toEdit() {
				this.isEdit = true
			},
			saveEdit() {
				this.isEdit = false
			},
			cancel() {
				this.isEdit = false
			},
			deleteSpot(spot) {
				uni.showModal({
					content: "确定要删除该点位吗，此操作不可删除！",
					success: (res) => {
						if (res.confirm) {
							console.log("删除点位")
							request(`/inspection/map/detail/${spot.mapDetailId}`, 'DELETE').then(res => {
								console.log(res)
								if (res.data.message == 'SUCCESS') {
									this.routeInfo = this.routeInfo.filter(r => r.mapDetailId !== spot.mapDetailId);
								}
							})
						}
					}
				})
			},
			returnTo() {
				uni.navigateBack()
			},
			addSpot() {
				this.isAddPoint = true
				uni.navigateTo({
					url:`/pages/map/addPoint/addPoint?mapId=${this.mapId}`
				})
			},
			checkMap() {
				uni.navigateTo({
					url: `/pages/map/mapView/mapView?mapId=${this.mapId}`
				})
			},
			getMapDetails() {
				request(`/inspection/map/${this.route.mapId}`, 'GET').then(res => {
					console.log(this.mapId)
					console.log("路线详情")
					console.log(res)
					this.routeInfo = res.data.data
				})
			}
		}
	}
</script>

<style scoped>
	.route-title {
		display: flex;
		background-color: #fff;
		text-align: left;
		padding: 20px;
		align-items: center;
	}

	.route-name {
		font-size: 35px;
		width: 80%;
	}

	.top {
		position: fixed;
		width: 100%;
		color: #fff;
	}

	.topBar {
		background-color: #0A60BD;
		display: flex;
		align-items: center;
		padding: 10px;
		padding-top: 25px;
	}

	.top-left {
		width: 10%;
	}

	.top-center {
		font-size: 30px;
		text-align: center;
		width: 80%;
	}

	.top-edit {
		width: 10%;
		display: flex;
		align-items: end;
	}

	.spot-view {
		display: flex;
		margin-top: 10px;
		background-color: #fff;
		height: 90px;
		align-items: center;
		padding: 20px;
		width: 80%;
		border-radius: 25px;
	}

	.left {
		width: 80%;
		margin-left: 5px;
	}

	.spot-name {
		font-size: 28px;
	}

	.spot-unit {
		margin-top: 15px;
	}

	.edit-btn {
		border-radius: 10px;
		font-size: 15px;
		min-width: 60px;
	}

	.addSpot {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28px;
		text-align: center;
		width: 90%;
		margin-left: 5%;
		background-color: #0A60BD;
		color: #fff;
		height: 50px;
		margin-top: 5px;
		margin-bottom: 5px;
		border-radius: 20px;
	}
	.spots{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>